.flash-message {
  border-style: solid;
  border-left-width: 3px;
  margin: 0 auto;
  padding: 20px;
  width: calc(100% - #{$content-buffer * 2});

  &:before {
    @include icon-stuff;
    margin-right: 10px;
  }

  .sidenav ~ & {
    @include bp(large) {
      margin-left: $sidenav-width + $content-buffer;
      width: calc(100% - #{$sidenav-width + ($content-buffer * 2) });
    }
  }
}

.notice {
  border-color: $c-notice-content;
  background: $c-notice-bg;
  color: $c-notice-content;

  &:before {
    content: fae-icon(check);
  }
}

.warning {
  border-color: $c-warning-content;
  background: $c-warning-bg;
  color: $c-warning-content;

  &:before {
    content: fae-icon(alert);
  }
}

.flash-message.error,
.alert {
  border-color: $c-error-content;
  background: $c-error-bg;
  color: $c-error-content;

  &:before {
    content: fae-icon(alert);
  }
}
